<template>
  <div class="video">


    <div class="video_item" v-for="(item,index) in videoArray" :key="index">
      <div class="video_source">
        <video  id="example_video_1" class="video-js vjs-default-skin vjs-big-play-centered"
                controls preload="auto"
                data-setup='{"example_option":true}'
               :poster="item.bgImg">
          <source :src="item.videos" type="video/mp4">
        </video>
        <!--<video id="example_video_1" class="video-js vjs-default-skin video_sub" controls preload="none"
               poster="http://vjs.zencdn.net/v/oceans.png">
          <source src="http://vjs.zencdn.net/v/oceans.mp4" type="video/mp4">
        </video>-->
      </div>

      <div class="video_select">

            <span class="video_select_left video_select_item">
              <img :src="item.img" class="img_one" alt="">
              <span class="author">{{item.author}}</span>
            </span>

        <div class="video_select_right video_select_item">

              <div class="video_select_right_span">
                <img src="../../assets/video/pause.png" alt="" class="img">
                {{item.pauses}}
              </div>

              <div class="video_select_right_span">
                <img src="../../assets/video/pinglun.png" alt="" class="img2">
                {{item.recommend}}
              </div>

              <div class="video_select_right_span">
                <img class="more" src="../../assets/video/more.png" alt="">
              </div>
            </div>
      </div>
    </div>



  </div>

</template>

<script>
     export default {
          name: "index",
       data(){
            return{
              videoArray: [
                {
                  videos: "http://vali.cp31.ott.cibntv.net/657340909EF4E72019C1F69AD/03001101005BD1783D0CACA2F2B8949D44B1C3-AC2C-482B-AC0E-6AE722BEAACB.mp4?ccode=050F&duration=59&expire=18000&psid=a37e79dde46a4f5874e1f4e3981a668e&ups_client_netip=3bac476b&ups_ts=1573711290&ups_userid=&utid=%2BR0vFgbA9QkCATusR2uktGoN&vid=XMzg4Njg3NDIyNA%3D%3D&vkey=Aaae8212a07d09c7a5be8efcfed001790&s=efbfbd1ac6bdefbfbd77&sp=&bc=2",
                  bgImg: require('../../assets/video/1.jpg'),
                  img: require('../../assets/icon/r01.png'),
                  author: '馒头音乐君',
                  pauses: '77万',
                  recommend: '212' },
                {
                  videos: "//vdse.bdstatic.com/52cb9702c343c95a4ddad249ac404eb7.mp4?authorization=bce-auth-v1/fb297a5cc0fb434c971b8fa103e8dd7b/2017-05-11T09:02:31Z/-1//dd00b002c683afffff5c917e1ad29cf0b3366835ef84cc204ac406b5720e08c7",
                  bgImg: require('../../assets/video/2.jpg'),
                  img: require('../../assets/icon/r02.png'),
                  author: '摇滚怪人安',
                  pauses: '83836',
                  recommend: '54',
                },
              ],
            }
       },
       mounted(){
         videojs('example_video_1', {
           controls : true/false,
           height:300,
           width:300,
           loop : true,
         });
       },
     }
</script>

<style scoped>

  .video{
    width: 100vw;
    height: 400px;
    background-color: #F1F2F3;
    position: relative;
  }


  #example_video_1{
    width: 375px;
    height: 300px;

  }

  .video_item{
    width: 100vw;
    background-color: #fff;

  }
  .video_source{
    width: 96vw;
    height: 250px;
    margin: 0 auto;
    border-radius: 15px;
   overflow: hidden;
    padding-top: 8px;
  }


  .video_select{
    width: 100vw;
    height: 40px;
    margin: 10px auto;
    font-size: 0;
    position: relative;
  }
  .video_select_item{
    display: inline-block;
    width: 50%;
    height: inherit;
    line-height: 30px;
    float: left;
  }
  .img_one{
    height: 70%;
    border-radius: 50%;
    position: absolute;
    top: 0;
    left: 5px;
    text-indent: 50px;
  }
  .author{
    font-size: 14px;
    display: inline-block;
    margin-left: 10px;
    position: absolute;
    top: -10px;
    left: 30px;
  }
  .video_select_left{
    text-align: left;
    line-height: 50px;
  }
  .video_select_right{

    color: #969798;
  }
  .video_select_right_span{
    width: 31%;
    height: inherit;
    float: left;
    box-sizing: border-box;
    text-align: right;
    font-size: 14px;
    line-height: 30px;
  }

  .img{
     width: 14px;
     position: absolute;
     top: 6px;
    left: 185px;
   }
  .img2{
    width: 14px;
    position: absolute;
    top: 8px;
    left: 260px;
  }
  .more{
    width: 22px;

  }

  html, body {
    margin: 0;
    padding: 0;
  }

  .video-js {
    width: 100%;
    height: 100%;
  }

</style>
